<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Bella</title>
        <meta name="description" content="" />

        <meta name="twitter:title" content="" />
        <meta name="twitter:description" content="" />

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="Title of the project" />
        <meta property="og:description" content="" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://github.com/PaulleDemon" />
        <!--Replace with the current website url-->
        <meta property="og:image" content="" />

        <link
            rel="shortcut icon"
            href="./assets/logo.jpg"
            type="image/x-icon"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
        />

        <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
        <link rel="stylesheet" href="./css/tailwind-build.css" />
        <link rel="stylesheet" href="./css/index.css" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
            integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
    </head>

    <body
        class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-bg-[#000] tw-text-white"
    >
        <div class="cursor">
            <img src="./assets/cursor-pointer.svg" alt="cursor" />
            <div class="cursor-div">You</div>
        </div>

        <header
            class="tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-px-[10%] max-md:tw-mr-auto md:tw-justify-around"
        >
            <div class="tw-flex tw-h-[60px] tw-w-[80px]">
                <!-- <img src="./assets/nikole.png" 
                  alt="logo" class="tw-object-cover"> -->
            </div>
            <div
                class="collapsible-header animated-collapse max-md:tw-shadow-lg max-md:tw-drop-shadow-xl"
                id="collapsed-items"
            >
                <div
                    class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base max-md:tw-mt-[30px] max-md:tw-flex-col max-md:tw-place-items-end max-md:tw-gap-5 md:tw-mx-auto md:tw-place-items-center"
                >
                    <a class="header-links" href=""> About me </a>
                    <a
                        class="header-links"
                        href=""
                        target="_blank"
                        rel="no-referrer"
                    >
                        Shop
                    </a>
                    <a class="header-links" href=""> My blogs </a>
                    <a class="header-links" href=""> Contact me </a>
                </div>
                <div
                    class="tw-flex tw-place-items-center tw-gap-[20px] tw-text-xl max-md:tw-w-full max-md:tw-place-content-center max-md:!tw-text-white"
                >
                    <a
                        href="https://www.instagram.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="instagram"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-instagram"></i>
                    </a>
                    <a
                        href="https://tiktok.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="tiktok"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-tiktok"></i>
                    </a>
                    <a
                        href="https://www.youtube.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="youtube"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-youtube"></i>
                    </a>
                </div>
            </div>
            <button
                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-2xl tw-text-white md:tw-hidden"
                onclick="toggleHeader()"
                aria-label="menu"
                id="collapse-btn"
            >
                <!-- <i class="bi bi-list"></i> -->
            </button>
        </header>

        <section
            class="tw-relative tw-mt-5 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-4"
        >
            <h1
                class="cursive-text tw-mt-8 tw-text-8xl tw-font-medium max-md:tw-text-4xl"
            >
                Bella
            </h1>

            <div
                class="tw-mt-8 tw-max-w-[400px] tw-text-justify tw-text-gray-200"
            >
                Bella is a content creator. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Ipsum consectetur veniam, numquam,
                quibusdam, expedita itaque id tenetur ea iusto praesentium
                quidem debitis? Quo quis perspiciatis porro explicabo iusto,
                quasi consequatur?
            </div>

            <h2 class="tw-mt-[5%] tw-text-2xl">Follow me on</h2>

            <div class="tw-mt-4 tw-flex tw-gap-4 tw-text-2xl">
                <a
                    href="https://www.instagram.com/"
                    target="_blank"
                    rel="no-referrer"
                    area-label="instagram"
                    class="header-links tw-transition-colors tw-duration-[0.3s]"
                >
                    <i class="bi bi-instagram"></i>
                </a>
                <a
                    href="https://tiktok.com/"
                    target="_blank"
                    rel="no-referrer"
                    area-label="tiktok"
                    class="header-links tw-transition-colors tw-duration-[0.3s]"
                >
                    <i class="bi bi-tiktok"></i>
                </a>
                <a
                    href="https://www.youtube.com/"
                    target="_blank"
                    rel="no-referrer"
                    area-label="youtube"
                    class="header-links tw-transition-colors tw-duration-[0.3s]"
                >
                    <i class="bi bi-youtube"></i>
                </a>
            </div>
        </section>

        <section
            class="tw-mt-[2%] tw-flex tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden tw-p-2 md:tw-px-[10%]"
            id="flip-section"
        >
            <div
                class="slideshow-container tw-flex tw-h-full tw-max-h-[650px] tw-w-full tw-max-w-[850px] tw-flex-col max-md:tw-mt-10 max-md:tw-h-[450px]"
                id="flip-image"
            >
                <img
                    src="./assets/images/homepage/portrait.jpg"
                    alt=""
                    class="tw-h-full tw-w-full tw-object-contain"
                />
            </div>
        </section>

        <section
            class="tw-relative tw-mt-[5%] tw-flex tw-max-w-[100vw] tw-flex-col tw-overflow-hidden"
        >
            <div
                class="sliding-image-container tw-flex tw-h-[350px] tw-w-full tw-gap-4 max-md:tw-h-[250px]"
                id="sliding-images"
            ></div>

            <div
                class="sliding-image-gradient tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full"
            ></div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-p-[5%] max-md:tw-px-[5%]"
        >
            <h3
                class="cursive-text tw-mt-10 tw-text-5xl tw-font-semibold max-md:tw-text-3xl"
            >
                Get My Merch
            </h3>

            <div
                class="tw-mt-8 tw-flex tw-w-full tw-gap-[5%] max-md:tw-flex-col max-md:tw-place-items-center max-md:tw-gap-5 md:tw-place-content-center"
            >
                <div
                    class="tw-relative tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-overflow-hidden tw-shadow-xl"
                >
                    <div class="tw-h-full tw-w-full tw-overflow-clip">
                        <img
                            src="./assets/images/homepage/merch1.jpg"
                            alt="women dress"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                    </div>
                    <div
                        class="tw-absolute tw-bottom-0 tw-mt-2 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-bg-[#121212c0] tw-p-2"
                    >
                        <h2 class="tw-text-xl tw-font-medium">Fancy Yellow</h2>

                        <a href="" class="btn tw-mt-2"> Get now </a>
                    </div>
                </div>

                <div
                    class="tw-relative tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-overflow-hidden tw-shadow-xl"
                >
                    <div class="tw-h-full tw-w-full tw-overflow-clip">
                        <img
                            src="./assets/images/homepage/merch2.jpg"
                            alt="women dress"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                    </div>
                    <div
                        class="tw-absolute tw-bottom-0 tw-mt-2 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-bg-[#121212c0] tw-p-2"
                    >
                        <h2 class="tw-text-xl tw-font-medium">Pretty white</h2>

                        <a href="" class="btn tw-mt-2"> Get now </a>
                    </div>
                </div>

                <div
                    class="tw-relative tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-overflow-hidden tw-shadow-xl"
                >
                    <div class="tw-h-full tw-w-full tw-overflow-clip">
                        <img
                            src="./assets/images/homepage/merch3.jpg"
                            alt="women dress"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                    </div>
                    <div
                        class="tw-absolute tw-bottom-0 tw-mt-2 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-bg-[#121212c0] tw-p-2"
                    >
                        <h2 class="tw-text-xl tw-font-medium">Shy pink</h2>

                        <a href="" class="btn tw-mt-2"> Get now </a>
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-[10%] tw-overflow-hidden tw-p-4 tw-px-[10%] max-md:tw-flex-col"
            id="book"
        >
            <div
                class="tw-flex tw-h-[350px] tw-w-[350px] tw-overflow-hidden tw-rounded-md max-md:tw-hidden"
            >
                <img
                    src="./assets/images/homepage/merch1.jpg"
                    alt="women"
                    class="tw-w-full tw-object-cover"
                />
            </div>
            <div class="tw-mt-[5%] tw-flex tw-h-full tw-flex-col tw-gap-8">
                <div class="tw-flex tw-flex-col tw-gap-2">
                    <h2
                        class="cursive-text tw-text-6xl tw-font-medium max-md:tw-text-2xl"
                    >
                        Contact
                    </h2>
                    <div
                        class="tw-whitespace-pre-line tw-text-lg max-md:tw-text-sm"
                    >
                        Looking to sponsor or collaborate? Just fill your
                        enquiry below and I'll reach out to you :)
                    </div>
                </div>
                <form class="tw-flex tw-flex-col tw-gap-3 md:tw-w-[400px]">
                    <div class="tw-flex tw-flex-col tw-gap-4">
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Name</div>
                            <input
                                type="text"
                                class="input"
                                maxlength="10"
                                required
                                placeholder="name"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Phone</div>
                            <input
                                type="text"
                                class="input"
                                required
                                placeholder="phone"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Email</div>
                            <input
                                type="email"
                                class="input"
                                required
                                placeholder="email"
                                id="email"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Reason</div>
                            <div class="dropdown input" id="dropdown1">
                                <button
                                    class="dropdown-toggle tw-flex tw-gap-5"
                                >
                                    <span>Select Option</span>
                                    <i
                                        class="bi bi-chevron-down tw-ml-auto"
                                    ></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>collaborate</li>
                                    <li>Sponsorships</li>
                                    <li>Others</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Enquiry</div>
                            <textarea
                                title="enquiry"
                                placeholder="enquiry"
                                class="input tw-max-h-[250px] tw-min-h-[40px] tw-w-full tw-resize-y"
                            ></textarea>
                        </div>
                    </div>

                    <button
                        type="submit"
                        class="btn tw-ml-auto tw-mt-5 tw-flex tw-gap-2 tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                    >
                        <span>Send enquiry</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </form>
            </div>
        </section>

        <section
            class="tw-mt-[2%] tw-flex tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-px-2 md:tw-px-[10%]"
        >
            <h2
                class="cursive-text tw-text-4xl tw-font-semibold max-md:tw-text-2xl"
            >
                Watch my latest vlog
            </h2>

            <div class="tw-mt-[5%]">
                <iframe
                    width="560"
                    height="315"
                    class="tw-h-[450] tw-w-[650] max-md:tw-h-[250px] max-md:tw-w-full"
                    src="https://www.youtube.com/embed/gKwI3bqO5Cg?si=3L6iY8vndO0-xrs9"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen
                ></iframe>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-p-[5%] tw-px-[10%]"
        >
            <div
                class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-3"
            >
                <h2
                    class="cursive-text primary-text-color tw-text-3xl max-md:tw-text-xl"
                >
                    Special Newsletter signup
                </h2>
                <h2 class="tw-text-xl tw-text-gray-300 max-md:tw-text-lg">
                    Get updates, tips and offers!
                </h2>

                <div
                    class="input tw-flex tw-h-[50px] tw-place-items-center tw-gap-3 tw-overflow-hidden !tw-p-0"
                >
                    <input
                        type="email"
                        class="tw-h-full tw-w-full tw-cursor-none tw-bg-transparent tw-px-3 tw-outline-none"
                        placeholder="email"
                    />
                    <button
                        class="btn tw-h-[35px] tw-h-full tw-transition-colors tw-duration-[0.3s]"
                    >
                        Signup
                    </button>
                </div>
            </div>
        </section>

        <footer
            class="tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-p-[5%] tw-px-[10%] tw-text-white max-md:tw-flex-col"
        >
            <div
                class="tw-mr-auto tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4"
            >
                <div
                    class="tw-flex tw-place-items-center tw-gap-[20px] tw-text-xl max-md:tw-w-full max-md:tw-place-content-center max-md:!tw-text-white"
                >
                    <a
                        href="https://www.instagram.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="instagram"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-instagram"></i>
                    </a>
                    <a
                        href="https://tiktok.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="tiktok"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-tiktok"></i>
                    </a>
                    <a
                        href="https://www.youtube.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="youtube"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-youtube"></i>
                    </a>
                </div>
            </div>
        </footer>
    </body>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
        integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"
        integrity="sha512-5efjkDjhldlK+BrHauVYJpbjKrtNemLZksZWxd6Wdxvm06dceqWGLLNjZywOkvW7BF032ktHRMUOarbK9d60bg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>

    <script src="./scripts/utils.js"></script>
    <script src="index.js"></script>
</html>
